<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>机器人列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <!-- <el-card> -->
      <el-table :data="robotList" border stripe
        ><!-- 带边框、斑马纹 -->
        <!-- <el-table-column type="index"></el-table-column> -->
        <el-table-column
          label="设备编号"
          prop="device_number"
        ></el-table-column>
        <el-table-column label="设备名称" prop="device_name"></el-table-column>
        <el-table-column label="IP" prop="device_ip"></el-table-column>
        <el-table-column label="端口" prop="device_port"></el-table-column>
        <el-table-column label="是否激活">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.is_active"
              active-color="#13ce66"
              inactive-color="#aaaaaa"
              @change="robotStateChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="连接状态"
          prop="status_connect"
        ></el-table-column>
        <!-- <el-table-column>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleConnect(scope.$index, scope.row)"
              >连接</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3, 7, 1, 12]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    <!-- </el-card> -->
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      //获取用户列表的参数对象
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 12,
      },
      robotList: [],
      total: 0,
      username: "",
    };
  },
  created() {
    this.getRobotsList();
  },
  mounted() {
    // 页面挂载后立即执行
    this.username = localStorage.getItem("username");
    console.log(this.username);
    this.$store.state.showDetails = false
    this.$emit('update:data', { show_details: false }); 
  },
  methods: {
    async getRobotsList() {
      const { data: res } = await this.$http.get("getRobots", {
        params: this.queryInfo,
      });
      if (res.meta.status != 200) {
        return this.$message.error("获取设备列表失败！");
      }
      this.robotList = res.data.robots;
      this.total = res.data.total;
    },
    async handleConnect(index, userinfo) {
      const { data: res } = await this.$http.put("connectRobot/" + userinfo.id);
      if (res.meta.status != 200) {
        // userinfo.mg_state = !userinfo.mg_state; //操作失败状态恢复
        return this.$message.error("更新用户状态失败！");
      }
      this.$message.success(res.meta.msg);
    },
    //监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      console.log(newSize);
      this.queryInfo.pagesize = newSize; //重新指定每页数据量
      this.queryInfo.pagenum = 1;
      this.getRobotsList(); //带着新的分页请求获取数据
    },
    //监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      console.log(newPage);
      this.queryInfo.pagenum = newPage; //重新指定当前页
      this.getRobotsList(); //带着新的分页请求获取数据
    },
    //监听switch开关状态的改变
    async robotStateChange(userinfo) {
      // console.log(userinfo);
      try {
        const { data: res } = await this.$http.put(
          "activeRobot/" + userinfo.id + "/state/" + userinfo.is_active
        );
        if (res.meta.status != 200) {
          userinfo.is_active = !userinfo.is_active; //操作失败状态恢复
          return this.$message.error(res.meta.msg);
        }
        this.$message.success(res.meta.msg);
      } catch (error) {
        userinfo.is_active = !userinfo.is_active; //操作失败状态恢复
        return this.$message.error("操作失败状态恢复！");
      }
    },
  },
};
</script>

<!-- 支持less语法格式，scoped代表样式只在本组件起作用 -->
<style lang="less" scoped>
.el-pagination {
  margin-top: 15px;
}
</style>
